<template>
  <view class="container">
    <!-- 搜索 -->
    <view class="header">
      <image src="../../static/icon/search.png" mode="" style="position: absolute; left: 50rpx; width: 28rpx; height: 28rpx"></image>
      <input type="text" placeholder="搜索文章" class="ipt" placeholder-class="txtwhite" v-model="name" @blur="search" />
    </view>
    <!-- 导航切换 -->
    <view class="box">
      <view :class="{ commonbox: tabindex == 2 }" @click="getteacherlist">收藏老师</view>
      <view :class="{ commonbox: tabindex == 1 }" @click="getcollectlist">收藏文章</view>
    </view>
    <!-- 导航栏 -->
    <scroll-view scroll-x="true" class="navbar" v-if="tabindex == 2">
      <view
        :class="{ navcommon: navindex == index }"
        v-for="(item, index) in navlist"
        :key="item.id"
        @click="changenav(index, item)"
        style="display: inline-block; text-align: center; line-height: 100rpx; padding: 0 10rpx"
      >
        {{ item.name }}
      </view>
    </scroll-view>

    <!--  <view class="navbar" v-if="tabindex == 2">
      <view :class="{ navcommon: navindex == index }" v-for="(item, index) in navlist" :key="item.id" @click="changenav(index, item)">{{ item.name }}</view>
    </view> -->
    <!-- 滑块使用方法 -->
    <scroll-view v-if="tabindex == 2" scroll-y="true" style="box-sizing: border-box; width: 100%; height: 1100rpx; padding: 40rpx 28rpx" @scrolltolower="more">
      <uni-swipe-action>
        <!-- 使用插槽 （请自行给定插槽内容宽度）-->
        <!-- v-for="index in 6" :key="index" -->
        <uni-swipe-action-item v-for="item in list" :key="item.id">
          <!-- 教师列表 -->
          <view class="item">
            <image :src="imgUrl + item.avatar" mode="aspectFill" style="width: 186rpx; height: 186rpx; margin: 0 4rpx"></image>
            <view class="right">
              <view class="top">
                <view style="display: flex; align-items: center; justify-content: space-between">
                  <view class="name">{{ item.byname }}</view>
                  <image src="../../static/icon/nan.png" mode="aspectFill" style="width: 42rpx; height: 42rpx"></image>
                  <view class="zhiwei">{{ item.identity_name }}</view>
                </view>
                <view style="font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 26rpx; color: #222222">{{ item.subject_name }}</view>
              </view>
              <!-- 教龄 -->
              <view style="margin: 12rpx 0 38rpx 0; font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 26rpx; color: #222222">教龄{{ item.teaching_len }}年</view>
              <view class="bottom" v-if="item.order == 1">
                <view class="time">已学课时 {{ item.period_out + '/' + item.period_num }}</view>
                <view class="yueyuebtn" @click.stop="goyuyue(item.id)">继续预约</view>
              </view>
            </view>
          </view>

          <template v-slot:right>
            <view style="display: flex; align-items: center; justify-content: space-evenly; flex: 1">
              <view class="collect" @click="canclecollect(item.id)">取消收藏</view>
              <button class="share" open-type="share" @click="chooseteacherid(item.id)">分享</button>
            </view>
          </template>
        </uni-swipe-action-item>
      </uni-swipe-action>
    </scroll-view>
    <!-- 文章 -->
    <scroll-view scroll-y="true" v-if="tabindex == 1" style="box-sizing: border-box; width: 100%; height: 1100rpx; padding: 40rpx 28rpx" @scrolltolower="more">
      <view class="articlebox" v-for="item in list" :key="item.id" @click="goarticledetail(item.id)">
        <image :src="imgUrl + item.pic" mode="aspectFill" style="width: 710rpx; height: 280rpx"></image>
        <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #222222; padding-left: 30rpx; margin-top: 10rpx">
          {{ item.title }}
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  onShareAppMessage() {
    this.navindex = 0;
    return {
      title: '分享教师',
      imageUrl: '/static/img/logo.png',
      path: '/parents/teacherdetail/teacherdetail?id=' + this.teacherid
    };
  },
  data() {
    return {
      imgUrl: '', // 配置图片的基地址
      navlist: [], // 科目的列表
      navindex: 0,
      teacherid: '', // 当前选中的教师id
      navid: '', // 导航栏id
      tabindex: 2,
      page: 1,
      name: '',
      list: [] // 数据列表
    };
  },
  methods: {
    goyuyue(id) {
      console.log('98888');
      uni.navigateTo({
        url: '/parents/jixuyuyue/jixuyuyue?id=' + id
      });
    },
    // 搜索
    search() {
      this.list = [];
      this.getlist();
    },
    // 点击取消收藏教师
    async canclecollect(id) {
      const res = await uni.$http.post('/follow/add', {
        type: '2',
        teacher_id: id
      });
      if (res.data.code == 1) {
        uni.showToast({
          title: res.data.msg,
          icon: 'none'
        });
        this.list = [];
        this.getlist();
      }
    },
    // 点击分享获取教师id
    chooseteacherid(id) {
      this.teacherid = id;
      this.getlist();
    },
    // 获取科目列表
    async getsubjectlist() {
      const res = await uni.$http.post('/index/subjectList', {
        name: ''
      });
      console.log('科目列表', res.data.data.list);
      this.navlist = res.data.data.list;
    },
    // 获取收藏列表
    async getlist() {
      const res = await uni.$http.post('/follow/list', {
        page: this.page,
        type: this.tabindex,
        name: this.name,
        subject_id: this.navid
      });
      if (res.data.data.list.length != 0) {
        this.list.push(...res.data.data.list);
        console.log(this.list);
      } else if (this.list.length == 0) {
        uni.showToast({
          title: '暂无数据',
          icon: 'none'
        });
      } else {
        uni.showToast({
          title: '数据已加载完毕',
          icon: 'none'
        });
      }
    },
    // 改变导航栏
    changenav(index, item) {
      console.log(index, item);
      this.navid = item.id;
      this.navindex = index;
      console.log('当前的当行索引', this.navindex, this.navid);
      this.list = [];
      this.getlist();
    },
    // 获取收藏老师列表
    getteacherlist() {
      this.page = 1;
      this.list = [];
      this.tabindex = 2;
      this.getlist();
    },
    // 获取收藏文章列表
    getcollectlist() {
      this.page = 1;
      this.list = [];
      this.tabindex = 1;
      this.getlist();
    },
    // 加载更多
    more() {
      this.page++;
      this.getlist();
    },
    // 跳转到文章详情
    goarticledetail(id) {
      uni.navigateTo({
        url: '/parents/articledetail/articledetail?id=' + id
      });
    }
  },
  async onLoad() {
    // 获取科目列表
    await this.getsubjectlist();
    // 配置图片的基地址
    this.imgUrl = this.imgurl;
    // 获取信息
    this.navid = this.navlist[0].id;
    // this.getlist();
  },
  async onShow() {
    this.page = 1;
    this.list = [];
    await this.getsubjectlist();
    this.navid = this.navlist[0].id;
    // 获取信息
    this.getlist();
  }
};
</script>

<style lang="scss" scoped>
button {
  padding: 0;
  margin: 0;
}
button::after {
  border: none !important;
}
.container {
  box-sizing: border-box;
  /deep/ .txtwhite {
    color: #fff !important;
  }
  .header {
    display: flex;
    align-items: center;
    width: 100%;
    height: 90rpx;
    background-color: #3553e8;
    .ipt {
      box-sizing: border-box;
      width: 692rpx;
      height: 64rpx;
      background: #5d75ed;
      padding-left: 80rpx;
      margin: 0 30rpx 0 28rpx;
      color: #fff;
      border-radius: 100rpx 100rpx 100rpx 100rpx;
    }
  }
  .box {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 750rpx;
    height: 100rpx;
    background-color: #3553e8;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 28rpx;
    color: #ffffff;
  }
  .commonbox {
    border-bottom: 6rpx solid #fff;
    padding-bottom: 20rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 28rpx;
    color: #ffffff;
  }
  .navbar {
    box-sizing: border-box;
    white-space: nowrap;
    // display: flex;
    // align-items: center;
    // justify-content: space-evenly;
    width: 750rpx;
    height: 100rpx;

    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 26rpx;
    color: #333333;
  }
  .navcommon {
    font-weight: bold;
    font-size: 28rpx;
    color: #333333;
    padding-bottom: 4rpx;
    border-bottom: 8rpx solid #3553e8;
  }
  .item {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;
    .right {
      flex: 1;
      margin-left: 18rpx;
      .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .name {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 30rpx;
          color: #222222;
        }
        .zhiwei {
          box-sizing: border-box;
          width: 104rpx;
          height: 40rpx;
          text-align: center;
          line-height: 40rpx;
          background: #eaedfd;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 22rpx;
          color: #3553e8;
          border-radius: 10rpx 10rpx 10rpx 10rpx;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
      .bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .time {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #222222;
        }
        .yueyuebtn {
          box-sizing: border-box;
          width: 160rpx;
          height: 60rpx;
          text-align: center;
          line-height: 60rpx;
          background: #e8ecff;
          border-radius: 100rpx 100rpx 100rpx 100rpx;
          border: 2rpx solid #3553e8;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #3553e8;
        }
      }
    }
  }
  .collect {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100rpx;
    height: 226rpx;
    text-align: center;
    padding: 0 10rpx;
    background: #f1f1f1;
    font-weight: 500;
    font-size: 28rpx;
    color: #222222;
  }
  .share {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100rpx;
    height: 226rpx;
    text-align: center;
    line-height: 226rpx;
    background: #e8ecff;
    font-weight: 500;
    font-size: 28rpx;
    color: #3553e8;
  }
  .articlebox {
    box-sizing: border-box;
    width: 710rpx;
    height: 360rpx;
    // margin: 30rpx 20rpx;
    background: #ffffff;
    box-shadow: 0rpx 4rpx 4rpx 2rpx rgba(191, 191, 191, 0.16);
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }
}
</style>
